<template>
    <ContentBox title="自然环境(土)">
        <div class="content">
            <div>
                <tuOne></tuOne>
            </div>
            <div>
                <tutwo></tutwo>
            </div>
            <div>
                <tuthree></tuthree>
            </div>
            <div>
                <tuFour></tuFour>
            </div>
        </div>
    </ContentBox>

</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"

    import tuOne from "./ChartsComponents/tuOne"
    import tutwo from "./ChartsComponents/tutwo"
    import tuthree from "./ChartsComponents/tuthree"
    import tuFour from "./ChartsComponents/tuFour"

    export default {
        name: "Preview",
        components: {
            ContentBox,
            tuOne,
            tutwo,
            tuthree,
            tuFour

        }
    }
</script>

<style lang="scss" scoped>
    .content {
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 40px;
        > div {
            height: 50%;
            width: 50%;

            &:nth-last-child(n+3) {
                border-bottom: 1px dashed #0096A1;
            }
            &:nth-of-type(odd) {
                border-right: 1px dashed #0096A1;
            }
        }
    }
</style>
